<template>
  <div class="revenueTrend">
    <div class="topArea">
      <div class="top">
        <ul>
          <li
            v-for="(item, index) in mainOperationIncome"
            :key="index"
            @click="getRevenData(index)"
            :class="{ active: cateIndex == index }"
          >
            <div class="td-info">
              <div class="td-l">
                <p class="p1">{{ item.indexName }}</p>
                <p class="p2">{{ item.thisMonthValue }}</p>
              </div>
              <div class="td-r" :class="'titlebg' + index">
              </div>
            </div>
            <div class="bd">
              <div class="bd1">
                <p>完成率</p>
                <p>{{ item.completeRate }}</p>
              </div>
              <div class="bd2">
                <p>同比增长率</p>
                <p>{{ item.tbYearIncrease }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottomArea" v-if="highFlag" F>
      <div
        class="leftArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
        <!-- <div class="title">{{reportFNetName}}</div> -->
        <accumIncome :accumIncomeData="accumIncomeData"></accumIncome>
        <incomBar :incomeData="incomeData"></incomBar>
      </div>
      <div
        class="rightArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
        <div class="title">{{ picName }}</div>
        <threepie :id="id" :option="option" class="pieThere"></threepie>
        <!-- <volumePie :structDTOData='structDTOData'></volumePie> -->
        <!-- <volumePie :structDTOData='structDTOData' v-show="structDTOData !== undefined && structDTOData.length>0"></volumePie> -->
      </div>
    </div>
  </div>
</template>

<script>
import incomBar from "../echarts/incomBar";
import accumIncome from "../echarts/accumIncome";
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import threepie from "../echarts/threepie";
export default {
  name: "revenueTrend",
  components: {
    // tab1,
    // tab2,
    incomBar,
    accumIncome,
    threepie,
  },
  data() {
    return {
      picName: "",
      mainBusinessIncome: {},
      mainOperationIncome: [],
      mainDev: [],
      acctMonth: "",
      mainIncomeTitle: "",
      basicTitle: "",
      dictTitle: "",
      numberIncomeTitle: "",
      accumIncomeData: {},
      incomeData: {},
      pieData: [],
      businessVolume: [],
      cateIndex: 0,
      id: "test",
      structDataList: [],
      highFlag: false,
      leftWidth: true,
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        title: {
          text: "", //图表的标题文字
        },
        tooltip: {
          pointFormat: "{point.y}万元",
        },
        credits: {
          enabled: false,
        }, //去掉地址
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 30, //饼图的厚度
            size: "100%",
          },
        },
        series: [
          {
            type: "pie",
            size: "80%",
            name: "",
            data: [],
            // data:this.pieData,
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: "{point.name}<br>{point.y}万元",
              distance: 25,
              padding: 0,
              color: "#636d9a",
            },
          },
          {
            type: "pie",
            size: "80%",
            name: "",
            data: [],
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
              format: "{point.percentage:.0f}%",
              distance: -30,
              padding: 0,
              style: {
                color: "#fff",
                textOutline: "none",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    if (screen.width < 1600) {
      this.option.series[0].size = "80%";
      this.option.series[1].size = "80%";
    } else if (screen.width > 1600 && screen.width < 1920) {
      this.option.series[0].size = "90%";
      this.option.series[1].size = "90%";
    } else {
      this.option.series[0].size = "100%";
      this.option.series[1].size = "100%";
    }
    console.log(screen.width);
    this.init();
  },
  methods: {
    init() {
      this.getMainOperationIncomeData();
      // this.getIncomeProductStructData()
      this.getRevenData(0);
    },
    //获取主营数据接口
    getMainOperationIncomeData(index) {
      let token = getCookie("token");
      let that = this;
      return new Promise((resolve) => {
        $budgetAPI.getMainOperationIncomeData(
          { token: token },
          (res) => {
            if (res.code == 0) {
              this.mainOperationIncome = res.content.mainBusinessIncome;
              res.content.mainBusinessIncome.map((item, index) => {
                item.completeRate = item.completeRate + "%";
                item.tbYearIncrease = item.tbYearIncrease + "%";
              });
              this.initPam = res.content.mainBusinessIncome[index].indexCode;
            } else {
              console.log(res);
              // this.alertError(res);
            }
            resolve(this.initPam);
          },
          (err) => {}
        );
      });
    },
    getRevenData(index) {
      this.cateIndex = index;
      this.highFlag = false;
      // this.leftWidth = false;
      this.getMainOperationIncomeData(index).then((res) => {
        let indexCode = res;
        let token = getCookie("token");
        $budgetAPI.getMainIncomeReportData(
          { token: token, indexCode: indexCode },
          (res) => {
            if (res.code == 0) {
              this.picName = res.content.picName;
              let obj = {
                xAxis: [],
                yAxis: [],
                y1Axis: [],
              };
              obj.xAxis = res.content.acctMonths;
              obj.yAxis = res.content.tbIncreaseList;
              let obj1 = {
                xAxis: [],
                yAxis: [],
              };
              obj1.xAxis = res.content.acctMonths;
              obj1.yAxis = res.content.mainIncomeList;
              this.accumIncomeData = obj;
              this.incomeData = obj1;
              console.log(this.incomeData);
              // 3d饼图
              this.pieData = [];
              this.structDataList = res.content.structDataList;
              if (
                res.content.structDataList &&
                res.content.structDataList.length
              ) {
                res.content.structDataList.map((item, index) => {
                  let colorList = ["#7f92f7", "#f48892"];
                  let obj = {};
                  obj["name"] = item.indexName;
                  obj["y"] = Number(item.indexValue);
                  obj["color"] = colorList[index];
                  this.pieData.push(obj);
                });
                this.option.series[0].data = this.pieData;
                this.option.series[1].data = this.pieData;
              }

              this.highFlag = true;
              // this.leftWidth = false;
              // this.$nextTick(()=>{
              // this.leftWidth = true;

              // })
            } else {
              console.log(res);
              //  this.alertError(res);
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.revenueTrend {
  .topArea {
    ul {
      display: flex;
      li {
        flex: 1;
        padding: 30px 35px;
        // text-align: center;
        background-color: #fff;
        border-radius: 5px;
        // margin-left: 20px;
        // display: flex;
        // height: 90px;
        // padding: 20px 15px;
        font-size: 14px;
        cursor: pointer;
        // div {
        //   display: inline-block;
        //   width: 50%;
        //   border-right: 1px dashed #dfe4fd;
        //   &:first-child {
        //     width: 60%;
        //   }
        //   &:last-child {
        //     border-right: none;
        //   }
        //   span {
        //     height: 25px;
        //     line-height: 25px;
        //   }
        //   span:first-child {
        //     color: #dfe4fd;
        //   }
        //   span:last-child {
        //     color: #fff;
        //     font-weight: 700;
        //   }
        // }

        
        // &:first-child {
        //   margin-left: 0;
        // }
        .td-info {
          display: flex;
          align-items: center;
          .td-l {
            .p1 {
                font-size: 12px;
            }
            .p2 {
              font-size: 16px;
              font-weight: bold;
            }
            
          }
          
          .titlebg0 {
            width: 45px;
            height: 40px;
            background: url("~@/assets/images/common/type-n1.png");
            background-size: contain;
          }
        }
        &.active {
          background-image: linear-gradient(to bottom right, #4ae3ff, #42adfd);
          color: #fff;
          .titlebg0 {
            width: 45px;
            height: 40px;
            background: url("~@/assets/images/common/type-w1.png");
            background-size: contain;
          }
        }
      }
    }
  }
  .bottomArea {
    display: flex;
    height: 370px;
    position: relative;
    .leftArea {
      width: 60%;
      position: relative;
      margin-right: 30px;
      &.active {
        width: 100%;
        margin-right: 0px;
        transition: 0.3s ease;
      }
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
      }
      .income {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        left: 0;
        top: 40%;
      }
      .yearOnYear {
        padding: 5px 10px;
        background: #f2f3f7;
        border-radius: 50px;
        position: absolute;
        right: 0px;
        top: 48%;
      }
    }
    // .rightArea{
    //   width: 0;
    // }
    .rightArea {
      width: 40%;
      position: relative;
      &.active {
        width: 0;
        display: none;
      }
      .title {
        position: relative;
        top: 20px;
        color: #000;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}
</style>
